var CommentTable=React.createClass({
	getInitialState:function(){
		return {
			data:[]
		};
	},
    SubmitData:function(){
		$.ajax({
			url:this.props.url,
			dataType:'json',
			data: {action:"controller/GetData",table_name:"author"},
			success:function(result){
				this.setState({data:result});			
			}.bind(this),
			error:function(xhr,status,err){
				console.error(this.props.url,status,err.toString());
			}.bind(this)
		});
    },
    componentDidMount:function(){
		this.SubmitData();
	},
	render:function(){
		return (
			<table>
				<TableHead/>
				<TableBody url={this.props.url} data={this.state.data} oncheck={this.SubmitData}/>
				<TableFoot url={this.props.url} oncheck={this.SubmitData}/>
			</table>
			);
	}
});
var TableHead=React.createClass({
	render:function(){
		return (
			<thead>
				<tr>
					<th>ID</th>
					<th>LastName</th>
					<th>FirstName</th>
					<th>Address</th>
					<th>City</th>
					<th>Operation</th>
				</tr>
			</thead>
			);
	}
});
var TableBody=React.createClass({
	render:function(){
		var this_url=this.props.url;
		var this_check=this.props.oncheck;
		var tdNodes=this.props.data.map(function(result){
			return (
				<TableTr 
					oncheck={this_check}
					url={this_url} 
					key={result.id} 
					id={result.id} 
					lastname={result.lastname} 
					firstname={result.firstname} 
					address={result.address} 
					city={result.city}
				/>
				);
		});
		return (
			<tbody>
				{tdNodes}
			</tbody>
			);
	}
});
var TableTr=React.createClass({
	handleDelete: function(event) {
		$.ajax({
			url:this.props.url,
			data: {
				action:"controller/DeleteData",
				id:this.props.id
			},
			success:function(result){
				if(result>0){
					//刷新
					this.props.oncheck();
				}
				else{
					//报错
				}
			}.bind(this),
			error:function(xhr,status,err){
				console.error(this.props.url,status,err.toString());
			}.bind(this)
		});
  	},
	render:function(){
		return (
			<tr>
				<td ref={this.props.id}>{this.props.id}</td>
				<td>{this.props.lastname}</td>
				<td>{this.props.firstname}</td>
				<td>{this.props.address}</td>
				<td>{this.props.city}</td>
				<td>
					<button>Update</button>
					<button onClick={this.handleDelete}>Delete</button>
				</td>
			</tr>
			);
	}
});
var TableFoot=React.createClass({
	handleClick: function(event) {
    	$.ajax({
			url:this.props.url,
			data: {
				action:"controller/InsertData",
				id:this.refs.newid.value,
				lastname:this.refs.newlastname.value,
				firstname:this.refs.newfirstname.value,
				addresss:this.refs.newaddresss.value,
				city:this.refs.newcity.value
			},
			success:function(result){
				if(result>0){
					//刷新并清空input
					this.props.oncheck();
					this.refs.newid.value="";
					this.refs.newlastname.value="";
					this.refs.newfirstname.value="";
					this.refs.newaddresss.value="";
					this.refs.newcity.value="";
				}
				else{
					//报错
				}
			}.bind(this),
			error:function(xhr,status,err){
				console.error(this.props.url,status,err.toString());
			}.bind(this)
		});

  	},
	render:function(){
		return (
			<tfoot>
				<tr>
					<td><input type="text" ref="newid"></input></td>
					<td><input type="text" ref="newlastname"></input></td>
					<td><input type="text" ref="newfirstname"></input></td>
					<td><input type="text" ref="newaddresss"></input></td>
					<td><input type="text" ref="newcity"></input></td>
					<td><button onClick={this.handleClick}>Submit</button></td>
				</tr>
			</tfoot>
			);
	}
});
ReactDOM.render(
	<CommentTable url="router/router.php" />,
	document.getElementById('content')
);

